<template>
    <div>
        <div>
            <el-form :model="form" :rules="rules"  ref="formRef">
                <el-form-item prop="start">
                    <el-input style="width: 300px;" v-model="form.start" type="text" placeholder="发货地"></el-input>
                    <el-button style="margin-left: 10px;width: 129px" type="primary" @click="leastDistance"> 最短距离 </el-button>
                    <el-button style="width: 129px" type="primary" @click="leastTime"> 最短时间 </el-button>
                </el-form-item>
                <el-form-item prop="end">
                    <el-input style="width: 300px;" v-model="form.end" type="text" placeholder="收货地"></el-input>
                    <el-button @click="findMap()" style="width: 270px;margin-left: 10px;" type="success" plain>查看路线</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
        <baidu-map class="map"
                   style="overflow: revert"
                   :center="{ lng: 112.83917, lat: 28.293723 }"
                   :zoom="15"
                   :scroll-wheel-zoom="true"
                   :continuous-zoom="true"
                   @ready="setDistanceToolInstance"
        >
            <bm-driving :start="lushuPoint.start" :end="lushuPoint.end" :auto-viewport="true" :policy="policy" :panel="true" >
            </bm-driving>
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        </baidu-map>
        </div>
    </div>
</template>

<script setup>
    import {reactive, ref} from 'vue';
    import {get} from "@/net";
    import {ElMessage} from "element-plus";
    import DistanceTool from 'bmaplib.distancetool'
    const distanceTool = ref(null);
    const SLng=ref('');
    const SLat=ref('');
    const ELng=ref('');
    const ELat=ref('');

    const setDistanceToolInstance = ({ map }) => {
        distanceTool.value = new DistanceTool(map, { lineStroke: 2 });
    };
    const form=reactive({
        start:'',
        end:''
    })
    /*  lng: 112.83917,
        lat: 28.293723*/
    /*  lng: 112.839377,
        lat: 27.87084*/
    const policy = ref('');
    const lushuPoint = ref({
        start: {
            lng: SLng,
            lat: SLat
        },
        end: {
            lng: ELng,
            lat: ELat
        },
    });

    const rules={
        start:[
            { required: true, message: '请输入发货地' }
        ],
        end:[
            { required: true, message: '请输入收货地' }
        ]
    }
    const findMap=()=>{
        console.log(form.start)
        console.log(form.end)
        get(`/out/map?start=${form.start}&end=${form.end}`,(data)=>{
            console.log(data)
            SLng.value=data.slng;
            SLat.value=data.slat;
            ELng.value=data.elng;
            ELat.value=data.elat;
        },(data)=>{
            ElMessage.error('发货地或收货地有误')
        })
    }
    const leastDistance = () => {
        policy.value = "BMAP_DRIVING_POLICY_LEAST_DISTANCE"
    };
    const leastTime = () => {
        policy.value = "BMAP_DRIVING_POLICY_LEAST_TIME"
    };
</script>

<style>
    .map {
        width: 100%;
        height: 600px;
    }
</style>